<template>
    <div :class="className" :style="{ height: height, width: width }" />
  </template>
  
  <script>
  import echarts from "echarts";
  require("echarts/theme/macarons"); // echarts theme
 
  
  const animationDuration = 6000;
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: "chart",
      },
      width: {
        type: String,
        default: "100%",
      },
      height: {
        type: String,
        default: "300px",
      },
  
      yAxisLineTitle: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        chart: null,
        arrayData: [],
      };
    },
    mounted() {},
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      init(parms) {
        console.log("122", parms); // 接收数据
        this.$nextTick(() => {
          this.initChart(parms);
        });
      },
  
      initChart(parms) {
        this.chart = echarts.init(this.$el, "macarons");
        this.chart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          legend: parms.legend,
          xAxis: [
            {
              type: "category",
              data: parms.xAxis,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              axisLabel: {
                formatter: "{value} 元",
              },
            },
            {
              type: "value",
              name: this.yAxisLineTitle,
              min: 0,
  
              axisLabel: {
                formatter: "{value} %",
              },
            },
          ],
          series: parms.series,
        });
      },
    },
  };
  </script>
  